<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-for='(item,i) in arr'>{{item.id}} <span>{{item.name}}</span> <em>{{item.age}}</em></div>
        <button @click='add'>添加</button>
        <button @click='shanling'>删除第0个元素</button>
        <button @click='shanliang'>第1个位置起,删除2个元素</button>
        <button @click='paixu'>按照年龄从小到大进行排序</button>
        <button @click='nixu'>逆序</button>
    </div>

</body>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            arr1: [],
            arr: [{
                id: 1,
                name: 'zhangsan',
                age: 19
            }, {
                id: 2,
                name: 'lisi',
                age: 22
            }, {
                id: 3,
                name: 'wangwu',
                age: 16
            }, {
                id: 4,
                name: 'zhaoliu',
                age: 26
            }, {
                id: 5,
                name: 'runtu',
                age: 13
            }]
        },




        // 思考, 上述所使用的这些方法都有什么特点? arr本身发生改变了没有?对于这种情况, 我们需要用一个变量来接收返回值吗?
        methods: {
            // 需求1: 往arr的末尾增加一个新的数据, id为6,name为maotai,age为24
            add: function() {
                this.arr.push({
                    id: 6,
                    name: 'maotai',
                    age: 24
                })
            },
            // 需求2: 删除arr第0个元素
            shanling: function() {
                this.arr.splice(0, 1)
            },
            // 需求3: 从arr的第1个位置起,删除2个元素
            shanliang: function() {
                this.arr.splice(0, 2)
            },
            // 需求4: 对arr进行排序,按照年龄从小到大进行排序
            paixu: function() {
                this.arr.sort((a, b) => {
                    return a.age - b.age
                })
            },
            // 需求5: 对arr进行逆序
            nixu: function() {
                this.arr.reverse()
            }

        }
    })
</script>

</html>